import logo from '@/assets/img/logo.png';
import iconMap from '@/components/IconMap';
import { IRouterType } from '@/service/user';
import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import { history, Link } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];
const { Header, Sider, Content } = Layout;

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label: children ? label : <Link to={key}>{label}</Link>,
    type,
  } as MenuItem;
}
const SideBar = (props: { collapse: boolean }) => {
  const pathname = history.location.pathname;
  const routeList: IRouterType[] = sessionStorage.getItem('routeList')
    ? JSON.parse(sessionStorage.getItem('routeList')!)
    : [];

  const generateMenuItems = (routes: IRouterType[]): MenuItem[] => {
    return routes.map((route) => {
      return getItem(
        route.zhName,
        route.route,
        iconMap[route.icon],
        route.children ? generateMenuItems(route.children) : undefined,
      );
    });
  };
  const menuItemList = generateMenuItems(routeList);

  return (
    <Sider theme="light" className="side-bar" collapsed={props.collapse}>
      <div className="brand">
        <div className="logo">
          <img src={logo} alt="" />
          {!props.collapse && <h1>渡一教育</h1>}
        </div>
      </div>
      <div className="menu-container">
        <Menu mode="inline" selectedKeys={[pathname]} items={menuItemList}></Menu>
      </div>
    </Sider>
  );
};
export default SideBar;
